import React from 'react';
import {observer, inject} from 'mobx-react';

import {AsideNav, Button} from 'amis';
import {Link} from 'react-router-dom';

import '@fortawesome/fontawesome-free/css/all.css'

import type {IHomeStore} from "../../store/HomeStore";

@inject('homeStore')
@observer
export default class HomeAsideNav extends React.Component<{ homeStore: IHomeStore }> {

    componentDidMount() {
        const {homeStore} = this.props
        homeStore.loadPageTree()
    }

    render() {
        const {homeStore} = this.props

        return (
            <AsideNav
                key="aside"
                isOpen={(link: any) => true}
                navigations={homeStore.navigations}
                renderLink={({link, toggleExpand, classnames: cx, depth}: any) => {
                    if (link.hidden) {
                        return null;
                    }
                    return (
                        <Link to={`/pages/${link.pageId}`} onClick={() => homeStore.setCurrPageId(link.pageId)}>
                            {link.children && link.children.length > 0 ? (
                                <i onClick={e => {
                                    toggleExpand(link)
                                    e.stopPropagation();
                                    e.preventDefault();
                                }}
                                   key="icon"
                                   className={cx(`AsideNav-itemIcon`, link.open ? 'fas fa-angle-down' : 'fas fa-angle-right')}/>
                            ) : <i className={cx(`AsideNav-itemIcon`, 'fas fa-file')}/>}
                            <span key="label" className={cx('AsideNav-itemLabel')}>
                                    {link.label}
                                </span>
                        </Link>
                    )
                }}
                isActive={(link: any) => (homeStore.currPageId == link.pageId)}
            />
        );
    }
}

